<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >
      <el-container>
        <el-header>
          <el-input
            v-model="kwInput"
            placeholder="输入域名或者广告ID进行搜索"
            class="input-with-select"
            clearable
            @keyup.native.enter="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </el-input>
        </el-header>
        <el-main>
          <h3>广告账户信息:</h3>
          <el-row :gutter="20">
            <el-col :span="4"><span style="margin-right: 10px">广告ID:</span><span style="color:red">{{ data.ad }}</span></el-col>
            <el-col :span="8"><span style="margin-right: 10px">GMC:</span><span style="color:red">{{ data.gmail }}</span></el-col>
            <el-col :span="4"><span style="margin-right: 10px">经理账号:</span><span style="color:red">{{ data.manager }}</span></el-col>
            <el-col :span="4"><span style="margin-right: 10px">虚拟机:</span><span style="color:red">{{ data.vps }}</span></el-col>
            <el-col :span="4"><span style="margin-right: 10px">开户形式:</span><span style="color:red">{{ data.isp }}</span></el-col>
          </el-row>
          <h3>预算信息:</h3>
          <el-row :gutter="20">
            <el-col :span="4"><span style="margin-right: 10px">剩余预算:</span><span style="color:red">{{ budget.budget_remaining }}</span></el-col>
            <el-col :span="8"><span style="margin-right: 10px">每日预算:</span><span style="color:red">{{ budget.total_daily_budget }}</span></el-col>
            <el-col :span="4"><span style="margin-right: 10px">昨日消耗:</span><span style="color:red">{{ budget.cost }}</span></el-col>
            <el-col :span="4"><span style="margin-right: 10px">昨日收入:</span><span style="color:red">{{ budget.amount }}</span></el-col>
            <el-col :span="4"><span style="margin-right: 10px">更新日期:</span><span style="color:red">{{ budget.update_at }}</span></el-col>
          </el-row>
        </el-main>
        <!--        <el-footer>Footer</el-footer>-->
      </el-container>

    </el-dialog>
  </div>
</template>

<script>
import { Get as GetGoogleAdsAccount } from '@/api/orders/googleadsaccount'
import { Get as GetGoogleBudget } from '@/api/orders/googleadsbudget'
import qs from 'qs'

export default {
  name: 'Googleadsdetail',
  props: ['visible', 'kw', 'domain'],
  data() {
    return {
      budget: {
        budget_remaining: '',
        total_daily_budget: '',
        cost: '',
        amount: '',
        update_at: ''
      },
      data: {
        ad: '',
        gmail: '',
        manager: '',
        vps: '',
        isp: ''

      },
      listLoading: true,
      kwInput: '',
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 10,
      page: 1,
      total: 0,

      action: null,
      dialogVisible: false,
      title: '广告账户信息',
      width: '',
      projects: [],
      innerDialogVisible: false
    }
  },
  watch: {
    domain(v) {
      this.title = v + '广告账户信息'
    },
    kw(v) {
      this.kwInput = v
    },
    visible(v) {
      this.dialogVisible = v
      if (v) {
        this.getList()
      }
    }
  },
  methods: {
    resetTemp() {
      this.data = {
        ad: '',
        gmail: '',
        manager: '',
        vps: '',
        isp: ''

      }
      this.budget = {
        budget_remaining: '',
        total_daily_budget: '',
        cost: '',
        amount: '',
        update_at: ''
      }
    },
    getList() {
      this.listLoading = true
      GetGoogleAdsAccount(null, qs.stringify({
        kw: this.kwInput,
        all: true,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          if (response.data.data.length) {
            this.data = response.data.data[0]
            if (this.data.ad.length) {
              this.handleGetGoogleBudget(this.data.ad)
            }
            console.log(this.data)
          }
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleGetGoogleBudget(ad) {
      GetGoogleBudget(null, qs.stringify({
        kw: ad
      }))
        .then(response => {
          if (response.data.data.length) {
            this.budget = response.data.data
          }
        }).catch(err => {
          console.log(err)
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    close() {
      this.resetTemp()
      this.$emit('closeDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
